<template>
	<div class="login-container">
		<div class="login-form-box">
			<el-form
				:model="ruleForm"
				ref="ruleForm"
				label-width="70px"
				:rules="rules"
			>
				<el-form-item label="账号" prop="account">
					<el-input v-model="ruleForm.account" placeholder="请输入账号"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="ruleForm.password" type="password" placeholder="请输入密码"></el-input>
				</el-form-item>
				<el-form-item label="用户名" prop="user_name">
					<el-input v-model="ruleForm.user_name" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-radio-group v-model="ruleForm.sex">
						<el-radio :label="1">男</el-radio>
						<el-radio :label="0">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="邮箱">
					<el-input v-model="ruleForm.email" placeholder="请输入邮箱(选填)"></el-input>
				</el-form-item>
				<el-form-item label="手机号">
					<el-input v-model="ruleForm.phone" placeholder="请输入手机号(选填)"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						class="button"
						type="primary"
						@click="submitForm('ruleForm')"
						>注册</el-button
					>
					<el-button
						class="button"
						type="primary"
						@click="$router.replace('/home')"
						>返回首页</el-button
					>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import { post } from '_api/http';
export default {
	data() {
		return {
			ruleForm: {
				account: '',
				password: '',
				user_name: '',
				sex: null,
				email: '',
				phone: ''
			},
			rules: {
				account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
				user_name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
				sex: [{ required: true, message: '请选择性别', trigger: 'change' }]
			}
		};
	},
	methods: {
		async handleRegister() {
			const res = await post('/api/user/register', this.ruleForm);
			if (res.status) {
				this.$message.success('注册成功');
			} else {
				this.$message.error(res.message);
			}
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.handleRegister();
				} else {
					this.$message.error('请填写完整信息');
					return false;
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
.login-container {
	width: 100%;
	height: 100vh;
	background-image: url('../../assets/bg1.jpg');
	background-size: cover;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.login-form-box {
	width: 350px;
	padding: 30px;
	background-color: rgba(173, 216, 230, 0.8);
	margin: 0 auto;
	text-align: left;
	text-align: center;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.button {
	transform: translateX(-30px);
}
</style>
